<template>
<div class="rxTextareaExtContainer">
    <a-textarea
        v-if="!readonly"
        :placeholder="placeholder || this.i18n('opinionTips','请输入您的意见')"
        v-model="data"
        :auto-size="autoSize"
        @change="opinionChange"
    />
    <p v-else style="font-weight:normal;">
        {{ data | setHtml}}
    </p>
    <p class="numberWord"  v-if="!readonly"><span>{{i18n('wordAge','剩余字数')}}：{{count}}</span></p>
</div>
</template>

<script>
export default {
    name: "rxTextareaExt",
    props:{
        value:{},
        readonly:{
            default:false
        },
        maxCount:{
           default: 300
        },
        placeholder:{
            default:""
        },
        autoSize:{
            default:()=>{return {minRows:6}}
        }
    },
    data(){
        return {
            data:this.value
        }
    },
    computed:{
        count(){
            let _defaultCount = this.maxCount ;
            let val = this.data ? _defaultCount - this.data.length : _defaultCount ;
            return val ;
        },
    },
    filters:{
        setHtml(v){
            return v ? v.replace(/\n|\r\n/g, "<br>") : "" ;
        }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"rxTextareaExt",key);
        },
        opinionChange(e){
            if(e.target.value.length>this.maxCount - 1){
                this.data = (e.target.value || "").substring(0,this.maxCount);
                this.$message.error(this.i18n("warningWordLimit","请注意字数限制为")+ this.maxCount  +"！");
                return;
            }
        }
    },
    watch:{
        value:function (o,ol){
            this.data = o ;
        },
        data:function (o,ol){
            this.$emit('input',o);
        }
    }
}
</script>

<style scoped>
.rxTextareaExtContainer >>> textarea{
    margin-bottom: 0;
}
.numberWord{
    text-align: right;
    font-weight: normal;
    font-size: 12px;
    margin-top: 4px;
    line-height: normal;
}
</style>